<script setup lang="ts">
import * as THREE from "three";

//导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
//创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color("#8c8c8c");
//创建相机
const camera = new THREE.PerspectiveCamera(
  45, //视角
  window.innerWidth / window.innerHeight, //相机宽高比
  0.1, //近平面
  1000
); //原平面

//创建渲染器
const renderer = new THREE.WebGLRenderer();

// //创建几何体
const geometry = new THREE.BufferGeometry();
//创建顶点数据
//逆时针为正面
// const vertices= new Float32Array([
// -1.0,-1.0,1.0,
// 1.0,-1.0,1.0,
// 1.0,1.0,1.0,
// 1.0,1.0,1.0,
// -1.0,1.0,1.0,
// -1.0,-1.0,1.0,
// ])

//使用索引绘制
const vertices = new Float32Array([
  -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
]);
//创建顶点属性
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
//创建索引
const indices = new Uint16Array([0, 1, 2, 2, 3, 0]);
//设置索引
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
//设置两个顶点组
//从索引值0开始 3个顶点 第0个材质
geometry.addGroup(0, 3, 0);
geometry.addGroup(3, 3, 1);
const material = new THREE.MeshBasicMaterial({
  color: "#ff0000",
  side: THREE.DoubleSide, //两面都能看到
  wireframe: true,
});
const material1 = new THREE.MeshBasicMaterial({
  color: "#00ff00",
  side: THREE.DoubleSide, //两面都能看到
  // wireframe:true
});

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial1 = new THREE.MeshBasicMaterial({
  color: "#ffffff",
});
const cubeMaterial2 = new THREE.MeshBasicMaterial({
  color: "#ff0000",
});
const cubeMaterial3 = new THREE.MeshBasicMaterial({
  color: "#0ff000",
});
const cubeMaterial4 = new THREE.MeshBasicMaterial({
  color: "#00ff00",
});
const cubeMaterial5 = new THREE.MeshBasicMaterial({
  color: "#000ff0",
});
const cubeMaterial6 = new THREE.MeshBasicMaterial({
  color: "#0000ff",
});
const cube = new THREE.Mesh(cubeGeometry, [
  cubeMaterial1,
  cubeMaterial2,
  cubeMaterial3,
  cubeMaterial4,
  cubeMaterial5,
  cubeMaterial6,
]);

console.log(geometry);
const cube1 = new THREE.Mesh(geometry, [material, material1]);
scene.add(cube);
scene.add(cube1);
 
cube.position.set(2,2,2);
//设置相机位置
camera.position.z = 5;
camera.position.y = 5;
camera.position.x = 5;
//相机看向哪里
camera.lookAt(0, 0, 0);

//添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(999);
scene.add(axesHelper);
//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
//设置带阻尼
// controls.enableDamping=true

//设置阻尼系数
// controls.dampingFactor=0.05
//设置旋转速度
// controls.autoRotateSpeed=0.5
//设置旋转速度
// controls.autoRotate=true
//渲染函数
function animate() {
  controls.update();
  // 下一针继续调用animate
  requestAnimationFrame(animate);
  // cube.rotation.x+=0.01
  // cube.rotation.y+=0.01
  renderer.render(scene, camera);
}
//渲染

// document.body.appendChild(renderer.domElement)

let eventObj = {
  Fullscreenchange: function () {
    document.body.requestFullscreen();
  },
  Exitscreenchange: function () {
    document.exitFullscreen();
  },
};
const gui = new GUI();
// gui.name('控制')
//控制全屏

let screenfolder = gui.addFolder("全屏");
screenfolder.add(eventObj, "Fullscreenchange").name("全屏");
screenfolder.add(eventObj, "Exitscreenchange").name("退出全屏");
//控制立方体位置
// let folder=gui.addFolder('立方体位置')
// folder.add(cube.position,'x',-5,5).name('x轴').onFinishChange((val:any)=>{
//   console.log(val)
// })
// folder.add(cube.position,'y',-5,5).name('y轴')
// folder.add(cube.position,'z',-5,5).name('z轴')
//  gui.add(parentMaterial,"wireframe")
//  //线框控制器
//  gui.add(material,"wireframe")
// let cubeColor={
//   color:"#0008ff"
// }
// gui.addColor(cubeColor,"color").onChange((val:any)=>{
//   cube.material.color.set(val)
// })

setTimeout(() => {
  const dom = document.getElementById("test01");
  camera.aspect = dom!.offsetWidth / dom!.offsetHeight;
  //监听屏幕变化
  window.addEventListener("resize", () => {
    //重置画布宽高
    renderer.setSize(dom!.offsetWidth, dom!.offsetHeight);
    //重置相机视窗宽高
    camera.aspect = dom!.offsetWidth / dom!.offsetHeight;
    //更新相机投影矩阵
    camera.updateProjectionMatrix();
  });
  renderer.setSize(dom!.offsetWidth, dom!.offsetHeight); //渲染器画布大小
  dom!.appendChild(renderer.domElement);
  renderer.render(scene, camera);

  animate();
}, 0);
</script>

<template>
  <div id="test01"></div>
</template>

<style scoped>
#test01 {
  height: 100%;
  width: 100%;
  color: white;
  background-color: rgb(255, 255, 255);
}
</style>
